<template>
  <!-- swiper 插件 -->
  <swiper :options="swiperOption" class="news-scroll">
    <swiper-slide v-for="(slide, index) in swiperSlides" :key="index" class="scroll-item">用户<span class="user-name">{{ slide.username }}</span>回收了<a v-bind:href="'#/idle-clothes'" class="c-blue">{{ slide.product_name }}</a>
    </swiper-slide>
  </swiper>
</template>

<script>
  import { recycleLatest } from '../../service/getDate'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name: 'news-scroll',
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        swiperOption: {
          autoplay: 8000,
          loop: true,
          direction: 'vertical',
          autoplayDisableOnInteraction: false,
          setWrapperSize: true,
          observeParents: true
        },
        swiperSlides: []
      }
    },
    mounted: function () {
      recycleLatest().then(res => {
        if (res.code === 0) {
          this.swiperSlides = res.info
        }
      })
//      setInterval(() => {
//        // console.log('simulate async data')
//        let swiperSlides = this.swiperSlides
//        recycleLatest().then(res => {
//          if (res.code === 0) {
//            swiperSlides = res.info
//          }
//        })
//      }, 3000)
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  .news-scroll {
    position: relative;
    padding-left: 24px;
    overflow: hidden;
    height: 20px;

    .scroll-item {
      line-height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .user-name {
        color: #b4bdc6;
      }
    }

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 18px;
      background: url("../../views/home/images/notice.png") no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
